---
name: useBattery
rank: 32
tagline: Track the battery status of a user’s device with useBattery.
sandboxId: usebattery-o8js1p
previewHeight: 320px
relatedHooks:
  - usenetworkstate
  - usepreferredlanguage
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  The useBattery hook is useful for accessing and monitoring the battery status
  of the user’s device in a React application. By using this hook, you can
  easily retrieve information such as the battery level, charging status, and
  estimated charging and discharging times. It provides a state object that
  includes properties like supported, loading, level, charging, chargingTime,
  and dischargingTime.
</HookDescription>

<div class="reference">
  ### Return Values
  The hook returns an object containing the following properties:

  <div class="table-container">
  | Name             | Type    | Description |
  | ---------------- | ------- | ----------- |
  | supported        | boolean | Indicates whether the Battery Status API is supported in the user’s browser. |
  | loading          | boolean | Indicates if the battery information is still loading. |
  | level            | number  | Represents the level of the system’s battery. 0.0 means that the system’s battery is completely discharged, and 1.0 means the battery is completely charged. |
  | charging         | boolean | Represents whether the system’s battery is charging. `true` means the battery is charging, `false` means it’s not. |
  | chargingTime     | number  | Represents the time remaining in seconds until the system’s battery is fully charged. |
  | dischargingTime  | number  | Represents the time remaining in seconds until the system’s battery is completely discharged and the system is about to be suspended. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import { useBattery } from "@uidotdev/usehooks";
import Battery from "./Battery";

export default function App() {
  const { loading, level, charging, chargingTime, dischargingTime } =
    useBattery();
  return (
    <>
      <div className="wrapper">
        <h1>useBattery</h1>
        {!loading ? (
          <Battery
            level={level * 100}
            charging={charging}
            chargingTime={chargingTime}
            dischargingTime={dischargingTime}
          />
        ) : (
          <h2>Loading...</h2>
        )}
      </div>
    </>
  );
}
```

</StaticCodeContainer>
